<!--
 * @Author: zhoupei
 * @LastEditTime: 2023-06-16 19:55:29
 * @Description: Title
-->
<template>
    <div class="common-layout">
        <el-tabs model-value="0" type="card" class="demo-tabs">
            <el-tab-pane>
                <template #label>
                    <span class="custom-tabs-label">
                        <el-icon>
                            <EditPen />
                        </el-icon>
                        <span>撰写</span>
                    </span>
                </template>
                <el-container>
                    <el-container>
                        <el-header>
                            <div>
                                <el-row>
                                    <el-col :span="21">
                                        <h2 style="color:black; font-size: 15px;margin-left: -15px;">
                                            写作内容
                                        </h2>
                                    </el-col>
                                    <el-col :span="3" :push="1">
                                        <el-link @click="demoWriteClick" type="primary"
                                            style="font-size: 13px;font-weight: bold;">撰写示例</el-link>
                                    </el-col>
                                </el-row>
                            </div>
                        </el-header>
                        <el-aside width="99%" style="margin-top:-35px">
                            <div>
                                <el-input maxlength="2000" show-word-limit v-model="form.message" type="textarea"
                                    input-style="height: 325px; color: black;font-size:20px;" placeholder="告诉我该写点什么..." />
                            </div>
                        </el-aside>
                        <el-aside width="99%">
                            <div style="font-weight: bold;">
                                <el-row style="margin-top:5px">
                                    <el-col :span="2">&nbsp;长度</el-col>
                                </el-row>
                                <el-row style="margin-top:5px">
                                    <el-col :span="4" v-for="it in  form.lengthList " :key="it.id">
                                        <el-button @click="lengthClick(it.id)"
                                            :style="{ width: '70px', color: 'black', backgroundColor: it.selected ? 'rgb(202, 197, 247)' : 'rgb(255, 255, 255)' }"
                                            type="info">{{ it.label }}</el-button>
                                    </el-col>
                                </el-row>
                                <el-row style="margin-top:5px">
                                    <el-col :span="2">&nbsp;格式</el-col>
                                </el-row>
                                <el-row style="margin-top:5px">
                                    <el-col :span="4" v-for="it in  form.formatList " :key="it.id">
                                        <el-button @click="formatClick(it.id)"
                                            :style="{ marginTop: '3px', width: '70px', color: 'black', backgroundColor: it.selected ? 'rgb(202, 197, 247)' : 'rgb(255, 255, 255)' }"
                                            type="info">{{ it.label }}</el-button>
                                    </el-col>
                                </el-row>
                                <el-row style="margin-top:5px">
                                    <el-col :span="2">&nbsp;语气</el-col>
                                </el-row>
                                <el-row style="margin-top:5px">
                                    <el-col :span="4" v-for="it in  form.toneList " :key="it.id">
                                        <el-button @click="toneClick(it.id)"
                                            :style="{ marginTop: '3px', width: '70px', color: 'black', backgroundColor: it.selected ? 'rgb(202, 197, 247)' : 'rgb(255, 255, 255)' }"
                                            type="info">{{ it.label }}</el-button>
                                    </el-col>
                                </el-row>
                                <el-row style="margin-top:5px">
                                    <el-col :span="2">&nbsp;语言</el-col>
                                </el-row>
                                <el-row style="margin-top:5px">
                                    <el-col :span="4" v-for="it in  form.languageList" :key="it.id">
                                        <el-button @click="languageClick(it.id)"
                                            :style="{ width: '70px', color: 'black', backgroundColor: it.selected ? 'rgb(202, 197, 247)' : 'rgb(255, 255, 255)' }"
                                            type="info">{{ it.label }}</el-button>
                                    </el-col>
                                </el-row>
                            </div>
                        </el-aside>
                        <el-aside width="99%" style="margin-top:5px">
                            <el-row>
                                <el-col :span="24">
                                    <div style="border: 1px solid black;">
                                        <el-button @click="writeCommit" :icon="Edit" type="primary"
                                            style="font-size: 15px; font-weight: bold;background-color: rgb(202, 197, 247); color:rgb(5, 116, 180);width: 100%;height: 60px;"
                                            :loading="commitLoading">生成内容</el-button>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="12">
                                    <div style="border: 1px solid black;">
                                        <el-button @click="copyWriteText" :icon="DocumentCopy" type="primary"
                                            style="font-size: 15px; font-weight: bold;background-color: rgb(6, 128, 209); color:rgb(255, 255, 255);width: 100%;height: 60px;">复制预览</el-button>
                                    </div>
                                </el-col>
                                <el-col :span="12">
                                    <div style="border: 1px solid black;">
                                        <el-button @click="clearText" :icon="DocumentRemove" type="primary"
                                            style="font-size: 15px; font-weight: bold;background-color: rgb(6, 128, 209); color:rgb(255, 255, 255);width: 100%;height: 60px;">清空</el-button>
                                    </div>
                                </el-col>
                            </el-row>
                        </el-aside>
                    </el-container>
                    <el-aside width="70%">
                        <el-header>
                            <div>
                                <h2 style="color: black; font-size: 15px;margin-left: -15px;">预览
                                </h2>
                            </div>
                        </el-header>
                        <el-aside width="99%" style="margin-top:-35px">
                            <div style="border: 2px solid rgb(75, 71, 71);">
                                <el-input show-word-limit v-model="form.desc" type="textarea" ref="writeValueRef"
                                    input-style="background-color: rgb(70, 72, 73); height: 784px; color: white;font-size:20px;"
                                    placeholder="生成内容预览..." />
                            </div>
                        </el-aside>
                    </el-aside>
                </el-container>

            </el-tab-pane>
            <el-tab-pane>
                <template #label>
                    <span class="custom-tabs-label">
                        <el-icon>
                            <ChatDotSquare />
                        </el-icon>
                        <span>回复</span>
                    </span>
                </template>
                <el-container>
                    <el-container>
                        <el-header>
                            <div>
                                <el-row>
                                    <el-col :span="21">
                                        <h2 style="color:black; font-size: 15px;margin-left: -15px;">
                                            原文
                                        </h2>
                                    </el-col>
                                    <el-col :span="3" :push="1">
                                        <el-link @click="replyClick" type="primary"
                                            style="font-size: 13px;font-weight: bold;">回复示例</el-link>
                                    </el-col>
                                </el-row>
                            </div>
                        </el-header>
                        <el-aside width="99%" style="margin-top:-35px">
                            <div>
                                <el-input maxlength="2000" show-word-limit v-model="form.chat" type="textarea"
                                    input-style="height:150px;font-size:20px;" placeholder="要回复的原文..." />
                            </div>
                        </el-aside>
                        <el-header>
                            <div>
                                <div>
                                    <h2 style="color: black; font-size: 15px;margin-left: -15px;">回复内容
                                    </h2>
                                </div>
                            </div>
                        </el-header>
                        <el-aside width="99%" style="margin-top:-35px">
                            <div>
                                <el-input maxlength="2000" show-word-limit v-model="form.replyChat" type="textarea"
                                    input-style="height: 150px;font-size:20px;" placeholder="对以上文字回复的大致内容..." />
                            </div>
                        </el-aside>
                        <el-aside width="99%">
                            <div style="font-weight: bold;">
                                <el-row style="margin-top:5px">
                                    <el-col :span="2">&nbsp;长度</el-col>
                                </el-row>
                                <el-row style="margin-top:5px">
                                    <el-col :span="4" v-for="it in  form.lengthList " :key="it.id">
                                        <el-button @click="lengthClick(it.id)"
                                            :style="{ width: '70px', color: 'black', backgroundColor: it.selected ? 'rgb(202, 197, 247)' : 'rgb(255, 255, 255)' }"
                                            type="info">{{ it.label }}</el-button>
                                    </el-col>
                                </el-row>
                                <el-row style="margin-top:5px">
                                    <el-col :span="2">&nbsp;格式</el-col>
                                </el-row>
                                <el-row style="margin-top:5px">
                                    <el-col :span="4" v-for="it in  form.formatList " :key="it.id">
                                        <el-button @click="formatClick(it.id)"
                                            :style="{ marginTop: '3px', width: '70px', color: 'black', backgroundColor: it.selected ? 'rgb(202, 197, 247)' : 'rgb(255, 255, 255)' }"
                                            type="info">{{ it.label }}</el-button>
                                    </el-col>
                                </el-row>
                                <el-row style="margin-top:5px">
                                    <el-col :span="2">&nbsp;语气</el-col>
                                </el-row>
                                <el-row style="margin-top:5px">
                                    <el-col :span="4" v-for="it in  form.toneList " :key="it.id">
                                        <el-button @click="toneClick(it.id)"
                                            :style="{ marginTop: '3px', width: '70px', color: 'black', backgroundColor: it.selected ? 'rgb(202, 197, 247)' : 'rgb(255, 255, 255)' }"
                                            type="info">{{ it.label }}</el-button>
                                    </el-col>
                                </el-row>
                                <el-row style="margin-top:5px">
                                    <el-col :span="2">&nbsp;语言</el-col>
                                </el-row>
                                <el-row style="margin-top:5px">
                                    <el-col :span="4" v-for="it in  form.languageList" :key="it.id">
                                        <el-button @click="languageClick(it.id)"
                                            :style="{ width: '70px', color: 'black', backgroundColor: it.selected ? 'rgb(202, 197, 247)' : 'rgb(255, 255, 255)' }"
                                            type="info">{{ it.label }}</el-button>
                                    </el-col>
                                </el-row>
                            </div>
                        </el-aside>
                        <el-aside width="99%" style="margin-top:5px">
                            <el-row>
                                <el-col :span="24">
                                    <div style="border: 1px solid black;">
                                        <el-button @click="responseCommit" :icon="Edit" type="primary"
                                            style="font-size: 15px; font-weight: bold;background-color: rgb(202, 197, 247); color:rgb(5, 116, 180);width: 100%;height: 60px;"
                                            :loading="commitLoading">生成内容</el-button>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="12">
                                    <div style="border: 1px solid black;">
                                        <el-button @click="copyRespneText" :icon="DocumentCopy" type="primary"
                                            style="font-size: 15px; font-weight: bold;background-color: rgb(6, 128, 209); color:rgb(255, 255, 255);width: 100%;height: 60px;">复制预览</el-button>
                                    </div>
                                </el-col>
                                <el-col :span="12">
                                    <div style="border: 1px solid black;">
                                        <el-button @click="clearText" :icon="DocumentRemove" type="primary"
                                            style="font-size: 15px; font-weight: bold;background-color: rgb(6, 128, 209); color:rgb(255, 255, 255);width: 100%;height: 60px;">清空</el-button>
                                    </div>
                                </el-col>
                            </el-row>
                        </el-aside>
                    </el-container>
                    <el-aside width="70%">
                        <el-header>
                            <div>
                                <h2 style="color: black;font-size: 15px;margin-left: -15px;">预览
                                </h2>
                            </div>
                        </el-header>
                        <el-aside width="99%" style="margin-top:-35px">
                            <div style="border: 2px solid rgb(75, 71, 71);">
                                <el-input show-word-limit v-model="form.desc" type="textarea" ref="responseValueRef"
                                    input-style="background-color: rgb(70, 72, 73); height: 784px; color: white;font-size:20px;"
                                    placeholder="生成内容预览..." />
                            </div>
                        </el-aside>
                    </el-aside>
                </el-container>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { Edit, DocumentCopy, DocumentRemove } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import { useWebSocketStore } from '@/store';

const store = useWebSocketStore()

let commitLoading = ref(false);
const writeValueRef = ref<HTMLInputElement>()
const responseValueRef = ref<HTMLInputElement>()
let form = reactive({
    message: "",
    chat: "",
    replyChat: "",
    desc: "",
    length: "自动",
    format: "自动",
    tone: "自动",
    language: "自动",
    lengthList: [
        { id: 1, label: '自动', selected: true },
        { id: 2, label: '短', selected: false },
        { id: 3, label: '中等', selected: false },
        { id: 4, label: '长', selected: false },
    ],
    formatList: [
        { id: 1, label: '自动', selected: true },
        { id: 2, label: '电子邮箱', selected: false },
        { id: 3, label: '消息', selected: false },
        { id: 4, label: '评论', selected: false },
        { id: 5, label: '段落', selected: false },
        { id: 6, label: '文章', selected: false },
        { id: 7, label: '博客文章', selected: false },
        { id: 8, label: '想法', selected: false },
        { id: 9, label: '大纲', selected: false },
    ],
    toneList: [
        { id: 1, label: '自动', selected: true },
        { id: 2, label: '友善', selected: false },
        { id: 3, label: '随意', selected: false },
        { id: 4, label: '友好', selected: false },
        { id: 5, label: '专业', selected: false },
        { id: 6, label: '诙谐', selected: false },
        { id: 7, label: '有趣', selected: false },
        { id: 8, label: '正式', selected: false },
    ],
    languageList: [
        { id: 1, label: '自动', selected: true },
        { id: 2, label: '中文', selected: false },
        { id: 3, label: '英文', selected: false },
        { id: 4, label: '韩语', selected: false },
        { id: 5, label: '日语', selected: false },
    ]
});

const lengthClick = (id: number) => {
    form.lengthList.forEach(it => {
        if (it.id == id) {
            it.selected = true;
            form.length = it.label;
        } else {
            it.selected = false;
        }
    });
}
const formatClick = (id: number) => {
    form.formatList.forEach(it => {
        if (it.id == id) {
            it.selected = true;
            form.format = it.label;
        } else {
            it.selected = false;
        }
    });
}
const toneClick = (id: number) => {
    form.toneList.forEach(it => {
        if (it.id == id) {
            it.selected = true;
            form.tone = it.label;
        } else {
            it.selected = false;
        }
    });
}
const languageClick = (id: number) => {
    form.languageList.forEach(it => {
        if (it.id == id) {
            it.selected = true;
            form.language = it.label;
        } else {
            it.selected = false;
        }
    });
}
// 提交写作
const writeCommit = async () => {
    if (form.message == '') {
        ElMessage({
            message: '请填写写作内容',
            type: 'error',
        })
        return false;
    }
    commitLoading.value = true;
    form.desc = ``;
    let param = `您好,帮我写一篇写作,内容长度` + form.length + ' 格式为' + form.format + ',语气为' + form.tone + '语言为' + form.language + '的,具体和' + form.message + '相关的';
    // 等待send方法执行完毕
    store.send(param, (data: string) => {
        if (data == 'done') {
            commitLoading.value = false;
        } else {
            form.desc = data;
        }
    });
};
// 提交回复
const responseCommit = async () => {
    if (form.chat == '') {
        ElMessage({
            message: '请填写要回复的原文',
            type: 'error',
        })
        return false;
    }
    if (form.replyChat == '') {
        ElMessage({
            message: '请填写回复内容',
            type: 'error',
        })
        return false;
    }

    commitLoading.value = true;
    form.desc = ``;
    let param = `您好,帮我写一篇回复内容,内容长度` + form.length + ' 格式为' + form.format + ',语气为' + form.tone + '语言为' + form.language + '的,具体原文是' + form.chat + ' ,回复内容大概为' + form.replyChat;
    // 等待send方法执行完毕
    store.send(param, (data: string) => {
        if (data == 'done') {
            commitLoading.value = false;
        } else {
            form.desc = data;
        }
    });
};
// 复制
const copyWriteText = () => {
    const input = writeValueRef.value
    if (input) {
        input.select()
        document.execCommand('copy')
        ElMessage({
            message: '复制成功',
            type: 'success',
        })
    }
};
// 复制
const copyRespneText = () => {
    const input = responseValueRef.value
    if (input) {
        input.select()
        document.execCommand('copy')
        ElMessage({
            message: '复制成功',
            type: 'success',
        })
    }
};
// 清空
const clearText = () => {
    form.message = '';
    form.chat = '';
    form.replyChat = '';
    form.desc = '';
};
// 撰写示例
const demoWriteClick = () => {
    form.message = "周五员工大会";
    form.desc = `主题：周五员工大会

亲爱的团队成员，

我希望通过这封邮件提醒您，本周五我们将举行一次重要的员工大会。请您合理安排时间，确保能够参加。
会议的目的是总结过去一段时间的工作，并讨论未来的发展方向。在会上，我们将分享公司最新的成就和里程碑，同时也会对我们面临的挑战进行分析和讨论。这是我们加强沟通、提高团队效能的重要机会。

以下是会议的基本信息：
日期：本周五
时间：上午9点至中午12点
地点：公司大会议室

会议将由公司高层主持，他们将与我们分享关于公司新的战略和目标的重要信息。此外，他们还将回答我们的问题，并听取我们对公司发展的建议。

在会议期间，我们鼓励您积极参与讨论，分享您的观点和想法。我们希望通过大家的共同努力能够达成更好的工作成果。

为了确保您能充分享受会议，我们将提供点心和饮料供应。请在会议开始之前到达会场，以免耽误其他参与者的时间。

如果您有任何疑问或需要进一步的信息，请随时与我联系。

期待在周五的员工大会上与您见面！

祝好，

[您的名字]
`;
    form.formatList.forEach(it => {
        it.selected = false;
        if (it.label == '电子邮箱') {
            it.selected = true;
        }
    })
};
// 回复示例
const replyClick = () => {
    form.chat = `主题：周五员工大会

亲爱的团队成员，

我希望通过这封邮件提醒您，本周五我们将举行一次重要的员工大会。请您合理安排时间，确保能够参加。
会议的目的是总结过去一段时间的工作，并讨论未来的发展方向。在会上，我们将分享公司最新的成就和里程碑，同时也会对我们面临的挑战进行分析和讨论。这是我们加强沟通、提高团队效能的重要机会。

以下是会议的基本信息：
日期：本周五
时间：上午9点至中午12点
地点：公司大会议室

会议将由公司高层主持，他们将与我们分享关于公司新的战略和目标的重要信息。此外，他们还将回答我们的问题，并听取我们对公司发展的建议。

在会议期间，我们鼓励您积极参与讨论，分享您的观点和想法。我们希望通过大家的共同努力能够达成更好的工作成果。

为了确保您能充分享受会议，我们将提供点心和饮料供应。请在会议开始之前到达会场，以免耽误其他参与者的时间。

如果您有任何疑问或需要进一步的信息，请随时与我联系。

期待在周五的员工大会上与您见面！

祝好，

[您的名字]
`;
    form.replyChat = '我知道了，我会参加';
    form.desc = `
亲爱的[发送方名字]，

谢谢你的提醒和透露会议信息。我很高兴能参加本周五的员工大会。我会合理安排时间，确保能够出席。这次会议的目的是总结过去一段时间的工作，并讨论将来的发展方向。我期待着在会上能分享公司最新的成就和里程碑，同时也能参与我们所面临的挑战的分析和讨论。我认为这是加强沟通、提高团队效能的重要机会。

我已经记下了会议的基本信息，包括日期、时间和地点。我会在会议开始之前到达会场，以确保不会耽误其他参与者的时间。我也很高兴听到会议将由公司高层主持，他们将与我们分享公司新的战略和目标的重要信息，并乐意回答我们的问题，听取我们对公司发展的建议。

非常感谢你和团队为我们提供点心和饮料供应，这将帮助我们充分享受会议。如果我有任何疑问或需要进一步的信息，我会随时与你联系。

期待在周五的员工大会上与你和团队见面！

祝好，
[你的名字]
`;
    form.formatList.forEach(it => {
        it.selected = false;
        if (it.label == '电子邮箱') {
            it.selected = true;
        }
    })
};
</script>
<style></style>